<template>
  <div class="logs">
    <el-drawer title="我是标题" :visible.sync="show" size="40%" :with-header="false" @close="onClose">
      <div class="logs-inner">
        <div class="title"><i class="iconfont icon-message"></i>操作日志</div>
        <div class="logs-items">
          <div v-for="log in datas" class="list-item" :key="log.id">
            <span>{{log.opsType}}</span>
            <span>{{log.gyro}}</span>
            <span>{{log.opsCmd}}</span>
            <span class="flex-2">{{log.opsContent}}</span>
            <span class="flex-2">{{log.opsTime}}</span>
          </div>
        </div>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next"
                         :total="param.recordCount"
                         :page-size="param.pageSize"
                         @current-change="changePage"></el-pagination>
        </div>
        <div class="logs-ops">
          <el-button type="primary" @click="doRefresh">刷新</el-button>
          <el-button @click.stop="doClose">关闭</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import LogsApi from '@/api/log';

  export default {
	name: "logs",
	data() {
	  return {
		show: false,
		query: {},
		param: {
		  pageIndex: 1,
		  pageSize: 15,
		  recordCount: 0,
		  pageCount: 0,
		},
		datas: []
	  }
	},
	props: {
	  visible: {
		type: Boolean,
		default: false
	  }
	},
	computed: {
	  noMore() {
		return this.param.pageIndex >= this.param.pageCount
	  },
	},
	watch: {
	  visible: function () {
		this.show = this.visible;
		if (this.show) {
		  this.doRefresh();
		}
	  },
	},
	methods: {
	  onClose: function () {
		this.$emit('update:visible', false);
	  },
	  doClose: function () {
		this.show = false;
		this.onClose();
	  },
	  doRefresh: function () {
		this.page(1);
	  },
	  page: function (index) {
		this.param.pageIndex = index;
		LogsApi.page(this.query, this.param).then(res => {
		  this.param = res.obj.param;
		  this.datas = res.obj.data;
		});
	  },
	  changePage: function (index) {
		this.page(index);
	  },
	  next: function () {
		this.param.pageIndex = this.param.pageIndex + 1;
		this.page(this.param.pageIndex);
	  }
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
  .logs-inner {
    background-color $color-bg;
    padding 20px 0;
    height 100vh;

    .title {
      color $color-success;
      padding-left 18px;

      i {
        margin-right 10px;
      }
    }

    .logs-items {
      padding 10px;
      background-color $color-white;
      height 50vh;
      overflow hidden;
      overflow-y auto;

      .list-item {
        span {
          display inline-block;
          margin-right 3px;
          min-width 50px;
        }
        margin-bottom 3px;
      }
    }
    .pagination {
      padding-top 10px;
      text-align center;
    }

    .logs-ops {
      padding-top 60px;
      text-align center;
    }
  }
</style>